<template>
  <a-spin :spinning="loading">
    <a-card style="margin-top: 24px" :bordered="false" title="糖尿病患者缓解调查问卷">
      <a-button slot="extra" type="danger" @click="exit"> 返回首页 </a-button>
      <!-- <div class="table-operator" style="border-top: 5px">
        <a-button type="danger" @click="add" :disabled="buttonStatus"> 填写量表 </a-button>
      </div> -->

      <!-- <a-tabs v-model="activeKey" hide-add @click="changeDiabetes()" @edit="onEdit">
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
          {{ pane.content }}
        </a-tab-pane>
      </a-tabs> -->
      <div class="container">
        <div class="width90">
          <a-form-model-item layout="inline" label="评估结果" v-if="evalution1.result || evalution1.result == 0">
            <template v-if="evalution1.result == 0" class="ant-form-text">
              <p>很抱歉，您暂不符合逆转条件，请及时与您的医助联系。</p>
            </template>
            <template v-if="evalution1.result == 1" class="ant-form-text">
              <p>您符合逆转条件，请及时与您的医助联系或到店咨询逆转服务。</p>
            </template>
            <template v-if="evalution1.result == 2" class="ant-form-text">
              <p>您符合逆转条件，请及时与您的医助联系或到店咨询逆转服务。</p>
              <p>根据您的糖尿病并发症情况，需要进行心肺功能评估；为避免发生意外，逆转过程及生活中需避免高强度运动。</p>
            </template>
            <template v-if="evalution1.result == 3" class="ant-form-text">
              <p>您符合缓解条件，请及时与您的医助联系或到店咨询缓解服务。</p>
              <p>
                根据您的糖尿病并发症情况，需要进行心肺功能评估；为避免发生意外，缓解过程及生活中需避免高强度运动；不宜使用生酮饮食和高蛋白饮食缓解方案。
              </p>
            </template>
          </a-form-model-item>
          <a-form-model-item label="1.您的姓名">
            <a-input style="width:150px" :max-length="10" v-model="evalution1.name" />
          </a-form-model-item>
          <a-form-model-item label="2.性别">
            <a-radio-group v-model="evalution1.sex" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="3.手机号码">
            <a-input-number style="width:150px" v-model="evalution1.phone" placeholder="请输入你的手机号码" />
          </a-form-model-item>
          <a-form-model-item label="4.糖尿病确诊情况">
            <a-radio-group v-model="evalution1.diabetesDiagnosis" :options="options2" />
          </a-form-model-item>
          <template v-if="evalution1.diabetesDiagnosis == 2">
            <a-form-model-item label="5.糖尿病类型">
              <a-radio-group v-model="evalution1.diabetesType" :options="options1" />
            </a-form-model-item>
            <a-form-model-item label="6.确诊日期">
              <a-date-picker
                style="width: 100%"
                placeholder="请选择确诊日期"
                v-model="evalution1.diabetesDiagnosisDate"
                :disabled-date="disabledDate"
                :getCalendarContainer="node => node.parentNode"
              />
            </a-form-model-item>
            <a-form-model-item label="7.糖尿病家族史">
              <a-radio-group v-model="evalution1.diabetesFamilyHistory" :options="options3" />
            </a-form-model-item>
            <a-form-model-item label="8.用药情况">
              <a-radio-group v-model="evalution1.drugHistory" :options="options4" />
            </a-form-model-item>
            <a-form-model-item label="9.当前身体情况"></a-form-model-item>
            <a-form-model-item label="身高">
              <a-input-number
                style="width: 30%;margin-right:10px"
                :min="0"
                :max="999"
                v-model="evalution1.height"
                placeholder="请输入你的身高"
              />cm
            </a-form-model-item>
            <a-form-model-item label="体重">
              <a-input-number
                style="width: 30%;margin-right:10px"
                :min="0"
                :max="999"
                v-model="evalution1.weight"
                placeholder="请输入你的体重"
              />kg
            </a-form-model-item>
            <a-form-model-item label="腰围">
              <a-input-number
                style="width: 30%;margin-right:10px"
                :min="0"
                :max="999"
                v-model="evalution1.waistline"
                placeholder="请输入你的腰围"
              />cm
            </a-form-model-item>
            <a-form-model-item label="空腹c肽">
              <a-input-number
                style="width: 30%;margin-right:10px"
                :min="0"
                :max="999"
                v-model="evalution1.cpeptide"
                placeholder="请输入你的空腹c肽"
              />μg/L
            </a-form-model-item>
            <a-form-model-item label="餐后2小时c肽">
              <a-input-number
                style="width: 30%;margin-right:10px"
                :min="0"
                :max="999"
                v-model="evalution1.cpeptide2h"
                placeholder="请输入你的餐后2小时c肽"
              />μg/L
            </a-form-model-item>
            <a-form-model-item label="10.糖尿病并发症">
              <a-radio-group v-model="evalution1.diabetesComplication" :options="options3" />
              <a-checkbox-group
                v-if="evalution1.diabetesComplication == 1"
                v-model="evalution1.diabetesComplicationSymptom"
              >
                <a-checkbox :value="1">心血管自主神经病变</a-checkbox>
                <a-checkbox :value="2">糖尿病视网膜病变</a-checkbox>
                <a-checkbox :value="3">糖尿病肾病</a-checkbox>
                <a-checkbox :value="4">其它</a-checkbox>
              </a-checkbox-group>
              <a-input
                v-if="evalution1.diabetesComplicationSymptom && evalution1.diabetesComplicationSymptom.indexOf(4) > -1"
                type="textarea"
                :max-length="50"
                v-model="evalution1.diabetesComplicationSymptomOther"
                placeholder="请输入其它糖尿病并发症（50字内）"
              ></a-input>
            </a-form-model-item>
          </template>
          <div class="footer">
            <a-button
              :loading="saveLoading"
              style="margin-left: 500px; margin-top: 15px; margin-bottom: 1px"
              type="danger"
              @click="postDiabetes()"
            >
              评估
            </a-button>
          </div>
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<script>
import moment from 'moment'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { postAction, getAction } from '../../api/manage'

const options = [
  {
    value: 1,
    label: '男'
  },
  {
    value: 2,
    label: '女'
  }
]
const options1 = [
  {
    value: 1,
    label: '1型糖尿病'
  },
  {
    value: 2,
    label: '2型糖尿病'
  },
  {
    value: 3,
    label: '妊娠糖尿病'
  },
  {
    value: 4,
    label: '其它类型糖尿病'
  }
]
const options2 = [
  {
    value: 1,
    label: '未确诊'
  },
  {
    value: 2,
    label: '已确诊'
  }
]
const options3 = [
  {
    value: 1,
    label: '有'
  },
  {
    value: 2,
    label: '无'
  }
]
const options4 = [
  {
    value: 1,
    label: '吃药'
  },
  {
    value: 2,
    label: '打胰岛素'
  },
  {
    value: 3,
    label: '吃药和打胰岛素'
  },
  {
    value: 4,
    label: '不用药'
  }
]
const options5 = [
  {
    value: 1,
    label: '吃药'
  },
  {
    value: 2,
    label: '打胰岛素'
  },
  {
    value: 3,
    label: '吃药和打胰岛素'
  },
  {
    value: 4,
    label: '不用药'
  }
]

export default {
  name: 'Reverse',
  data() {
    var panes = []

    return {
      sas: {},
      evalution1: {},
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] },
      buttonStatus: false,
      savaRes: [],
      input: [],
      options1,
      options,
      options2,
      options3,
      options4,
      options5,
      dateFormat: 'YYYY-MM-DD',
      birth: '',
      gender: '',
      loading: true,
      saveLoading: false,
      pressureSystolic: '',
      activeKey: panes.content,
      panes,
      newTabIndex: 0,
      url: {
        postDiabetes: 'archive/reverse/commit',
        getDiabetes: '/archive/reverse/get'
      }
    }
  },
  watch: {
    'evalution1.diabetesDiagnosis'(n) {
      if (this.evalution1.diabetesDiagnosis && n == 1) {
        this.$nextTick(() => {
          this.evalution1.diabetesType = 0
          this.evalution1.diabetesDiagnosisDate = ''
          this.evalution1.diabetesFamilyHistory = 0
          this.evalution1.drugHistory = 0
          this.evalution1.height = ''
          this.evalution1.weight = ''
          this.evalution1.waistline = ''
          this.evalution1.cpeptide = ''
          this.evalution1.cpeptide2h = ''
          this.evalution1.diabetesComplication = 0
          this.evalution1.diabetesComplicationSymptom = []
          this.evalution1.diabetesComplicationSymptomOther = ''
        })
      }
    },
    'evalution1.diabetesComplication'(n) {
      if (n == 2) {
        this.$nextTick(() => {
          this.evalution1.diabetesComplicationSymptom = []
          this.evalution1.diabetesComplicationSymptomOther = ''
        })
      }
    }
  },
  created() {
    this.getDiabetes()
  },
  methods: {
    disabledDate(current) {
      return current > moment().endOf('day')
    },
    callback(key) {
      console.log(key)
    },
    getDiabetes() {
      getAction(this.url.getDiabetes, this.queryParam)
        .then(res => {
          if (res.success) {
            this.evalution1 = res.result || {}
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    postDiabetes() {
      const regex = /^1[3456789]\d{9}$/
      if (!regex.test(this.evalution1.phone)) {
        this.$message.warning('手机号码格式错误！')
        return
      }
      this.saveLoading = true
      this.evalution1.diabetesComplicationSymptom = this.evalution1.diabetesComplicationSymptom.join(',')
      postAction(this.url.postDiabetes, {
        ...this.evalution1,
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId]
      })
        .then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.getDiabetes()
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
    onDateChange(date, dateString) {
      this.birth = dateString
    },
    onEdit(targetKey, action) {
      this[action](targetKey)
    },
    isRightMobileNumber(rule, value, callback) {
      if (typeof value === 'undefined' || value === '') {
        callback()
      } else {
        const regex = /^1[3456789]\d{9}$/
        if (!regex.test(value)) {
          callback(new Error('手机号码格式错误！'))
        }
        callback()
      }
    },
    exit() {
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: '../index',
        query
      })
    }
  }
}
</script>
<style scoped>
.container {
  background-color: #fff;
  margin: 0 auto;
}
.title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #333333;
  margin: 15px 0;
}
/* .footer {
  text-align: center;
} */
.tall-text {
  font-size: 12px;
  margin: 20px auto;
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
}
p {
  margin: 5px;
}
.eval_p {
  margin: 15px 10px;
}
.eval_diet {
  margin-top: 15px;
  font-size: 16px;
}
.width90 {
  width: 90%;
  margin: 0 auto;
}
.ant-radio-group {
  display: block;
}
</style>

